
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>

</head>
<style>
	p{
		width: 20px;
		height: 20px;
		background: red;
		border-radius: 50%;
	}
	li{
		width: 200px;
		height: 30px;
		border:1px solid #ccc;
	}

</style>
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
<body>
	<div id="app">
			<button @click="fla = !fla">点击加入购物车</button>
		<transition
	    v-on:before-enter="beforeEnter"
		v-on:enter="enter"
		v-on:after-enter="afterEnter"
		>
			<p v-show='fla'></p>
     	</transition>

     	
     		<transition-group enter-active-class="animated bounceInUp" leave-active-class="" tag="ul">
     		<li v-for='(itm,i) in mx' :key='itm + i'>{{ itm }}</li>
     	    </transition-group>
     	
       <input type="text" v-model='names'> 
       <button @click=adds()>点击添加</button>

       <transition-group mode="out-in" enter-active-class='animated bounceInLeft'>
       	 <button  :key='1' v-show='!ttt' @click='ttt = !ttt'>开</button>
       	 <button  :key='2' v-show='ttt'  @click='ttt = !ttt'>管</button>
       </transition-group>
	</div>
	<script src="vue.js"></script>
	<script>
		const vm = new Vue({
			el:'#app',
			data:{
				fla:false,
				ttt:true,
				names:'',
				mx:['薛之谦','花粥','沈月']
			},
			methods:{
				adds(){
				 this.mx.push(this.names)
				},
				beforeEnter(el){
					console.log(el)
					el.style.transform = "translate(0,0)"

				},
			    enter(el,deon){
			    	el.offsetLeft;
			    	el.style.transform = "translate(200px,550px)"
			    	el.style.transition = "all 2s ease"
			    	deon()
			    },
			    afterEnter(el){
			    	this.fla = !this.fla

			    }
			}
		})
	</script>
	
</body>
</html>